<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 步骤1：引入echarts.js文件 -->
    <script src="lib/echarts.min.js"></script>


    <!-- 
    
    步骤1：引入echarts.js文件
    步骤2：准备一个呈现图标的盒子
    步骤3：初始化echarts实例对象
    步骤4：准备配置项
    步骤5：将配置项设置给echarts实例对象
     -->
</head>
<body>
    <!-- 步骤2：准备一个呈现图标的盒子 -->
    <div style="width: 600px; height: 400px;"></div>
    <script>
    // 步骤3：初始化echarts实例对象
    // 参数，dom，决定图标最终呈现的位置
        var myCharts = echarts.init(document.querySelector('div'))

        // 步骤4：准备配置项
        var option = {
            xAxis:{
                type:'category',
                data:['小明','小红','小王']
            },
            yAxis:{
                type:'value'
            },
            series:[
                {
                    name:'语文',
                    type:'bar',
                    data:[79,92,87]
                }
            ]
        }
        // 步骤5：将配置项设置给echarts实例对象

        myCharts.setOption(option)
    </script>
</body>
</html>